<template>
  <div class="page">
      <section class="banner">
        <img src="/images/banner.jpg" />
      </section>
      <main class="content">
        <Tabs :list="tabs" @toggle="handleToggle" :tabName="tabName" />
        <div class="tab-container" v-show="tabName == '全区监测'">
        </div>
        <div class="tab-container" v-if="tabName == '各市监测'">
          <Chart
            :datasource="datasource"
            @click="handleClick"
          />
          <h3>{{currRegion}}<CustomSelect  class="select" :options="times" @change="selectTime" /></h3>
          <List :datasource="regionTotalMap[currRegion]" :titles="['指标值', '增长率']" unit="%" />
        </div>
        <div class="tab-container" v-show="tabName == '数据查询'">
          <div class="control">
            <label><span class="label">类别：</span><CustomSelect  :options="categories" @change="selectCategory" /></label>
            <label><span class="label">指标年度：</span><CustomSelect  :options="years" @change="selectYear" /></label>
          </div>
          <h3 style="text-align: center">{{`${year}年${category}`}}</h3>
          <List :datasource="categoryYearData" />
        </div>
      </main>
  </div>
</template>


<script>
import Chart from "./business/Chart";
import List from "./business/List";
import Tabs from "./business/Tabs";
import CustomSelect from "@/common/CustomSelect";
import mock from "./mock";
// import { pick } from "@/utils";


export default {
  components: {
    Tabs,
    Chart,
    List,
    CustomSelect,
  },

  data() {
    const category = '地区生产总值(当年价)'
    return {
      region: '南宁市',
      tabs: ['全区监测', '各市监测', '数据查询'],
      tabName: '全区监测',
      category,
      categories: ['地区生产总值(当年价)', '地区生产总值构成(当年价)', '全社会固定资产投资(当年价)', '城镇失业登记情况', '居民消费价格指数', '地方财政收支'],
      year: 2019,
      times: ['2019年01-12月', '2020年01-10月'].reverse(),
      time: '2020年01-10月',
    }
  },

  computed: {
    datasource() {
      return mock['地区生产总值'][this.time]/* .filter(item => item["地区"] !== '全区') */.map(item => {
        return {
          name: item["地区"],
          value: item["地区生产总值"] || item["财政收入"]
        }
      })
    },
    regionTotalMap() {
      const ret = {}
      mock['地区生产总值'][this.time].forEach(({ 地区: region, ...others }) => {
        ret[region] = others
      })
      return ret
    },
    currRegion() {
      return this.tabName == '全区监测' ? '全区' : this.region
    },
    years() {
      return [...new Set(mock[this.category].map(item => item["指标年度"]))].sort().reverse()
    },
    categoryYearData() {
      const { 指标年度: year, ...others } = mock[this.category].find(item => item['指标年度'] == this.year)
      console.log(year)
      return others
    },
  },

  watch: {
    years() {
      if (this.year > this.years[0]) {
        this.year = this.years[0]
      }
    },
  },

   methods: {
    // pick(...keys) {
    //   return pick(mock, ...keys);
    // },
    handleClick(region) {
      if (this.tabName == '各市监测') {
        this.region = region
      }
    },
    handleToggle(msg) {
      // console.log(msg)
      this.tabName = msg[0]
    },
    selectCategory(category) {
      this.category = category
    },
    selectYear(year) {
      this.year = year
    },
    selectTime(time) {
      this.time = time
    }
  },
};
</script>


<style lang="less" scoped>
.page {
  border: .04rem solid #5b9bd5;
  border-top: .2rem solid #5b9bd5;
  .banner {
    background: #5b9bd5;
    border-bottom: .2rem solid #5b9bd5;
    &>img {
      width: 100%;
      height: 2.0rem;
    }
  }
  &>.content {
    border-top: .05rem solid #5b9bd5;
    border-radius: .05rem .05rem 0 0 / .05rem .05rem 0 0;
    .tab-container {
      margin: .05rem;
      padding: .1rem;
      min-height: 7rem;
      border: 1px solid #5b9bd5;
      h3 {
        position: relative;
        text-indent: 1em;
        font-size: .2rem;
        color: black;
        &>.select {
          position: absolute;
          top: -.05rem;
          right: 0;
          padding: .05rem .15rem .05rem .1rem;
          text-indent: 0;
          color:#577ea5;
          // background: #0f2b50;
        }
      }
  
      .control {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        &>label {
          margin-top: .2rem;
          font-weight: bold;
          color: #0585f9;
          
          &>.label {
            display: inline-block;
            text-align: end;
            min-width: .8rem;
            &:before {
              content: "*";
            }
          }
        }
      }
    }
  }
}
</style>